<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Tools Pro - 可视化应用管理器</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>Simple Tools Pro</h1>
            <div class="user-info">
                <span id="loginStatus">未登录</span>
                <button id="loginBtn">登录</button>
                <button id="logoutBtn" style="display: none;">退出</button>
            </div>
        </header>

        <div class="search-bar">
            <input type="text" id="searchInput" placeholder="搜索应用...">
            <button id="createAppBtn">创建应用</button>
        </div>

        <div class="content">
            <div class="apps-list" id="appsList">
                <!-- 应用列表将通过 JavaScript 动态加载 -->
            </div>
        </div>
    </div>

    <!-- 登录模态框 -->
    <div class="modal" id="loginModal">
        <div class="modal-content">
            <h2>登录</h2>
            <form id="loginForm">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" id="username" required>
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" required>
                </div>
                <div class="form-actions">
                    <button type="button" class="cancel-btn" id="cancelLoginBtn">取消</button>
                    <button type="submit">登录</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 创建应用模态框 -->
    <div class="modal" id="createAppModal">
        <div class="modal-content">
            <h2>创建新应用</h2>
            <form id="createAppForm">
                <div class="form-group">
                    <label for="appName">应用名称</label>
                    <input type="text" id="appName" required>
                </div>
                <div class="form-group">
                    <label for="projectName">项目名称</label>
                    <input type="text" id="projectName" required>
                </div>
                <div class="form-group">
                    <label for="appDescription">应用描述</label>
                    <textarea id="appDescription" rows="3"></textarea>
                </div>
                <div class="form-group">
                    <label for="appVersion">版本号</label>
                    <input type="text" id="appVersion" value="0.1.0" required>
                </div>
                <div class="form-group">
                    <label for="appAuthor">作者</label>
                    <input type="text" id="appAuthor" required>
                </div>
                <div class="form-group">
                    <label for="appLocation">应用位置</label>
                    <div class="location-input">
                        <input type="text" id="appLocation" readonly>
                        <button type="button" id="browseLocationBtn">浏览</button>
                    </div>
                </div>
                <div class="form-group">
                    <label for="appTemplate">应用模板</label>
                    <select id="appTemplate" required>
                        <!-- 模板列表将通过 JavaScript 动态加载 -->
                    </select>
                </div>
                <div class="form-actions">
                    <button type="button" class="cancel-btn" id="cancelCreateBtn">取消</button>
                    <button type="submit">创建</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 文件浏览器模态框 -->
    <div class="modal" id="fileBrowserModal">
        <div class="modal-content">
            <h2>选择应用位置</h2>
            <div class="file-browser">
                <div class="file-browser-header">
                    <button id="backToParentBtn">返回上级</button>
                    <span id="currentPath"></span>
                </div>
                <div class="file-list" id="fileList">
                    <!-- 文件列表将通过 JavaScript 动态加载 -->
                </div>
            </div>
            <div class="form-actions">
                <button type="button" class="cancel-btn" id="cancelBrowseBtn">取消</button>
                <button type="button" id="selectLocationBtn">选择</button>
            </div>
        </div>
    </div>

    <!-- 编辑应用模态框 -->
    <div class="modal" id="editAppModal">
        <div class="modal-content edit-modal">
            <div class="edit-header">
                <h2>编辑应用</h2>
                <div class="edit-tabs">
                    <button class="tab-btn active" data-tab="visual">可视化编辑</button>
                    <button class="tab-btn" data-tab="code">代码编辑</button>
                    <button class="tab-btn" data-tab="preview">预览</button>
                </div>
            </div>
            <div class="edit-content">
                <div class="tab-content active" id="visualTab">
                    <div class="edit-toolbar">
                        <div class="component-list">
                            <div class="component-item" draggable="true" data-type="button">按钮</div>
                            <div class="component-item" draggable="true" data-type="input">输入框</div>
                            <div class="component-item" draggable="true" data-type="label">标签</div>
                            <div class="component-item" draggable="true" data-type="container">容器</div>
                        </div>
                    </div>
                    <div class="edit-canvas" id="editCanvas">
                        <!-- 拖拽的元素将在这里显示 -->
                    </div>
                </div>
                <div class="tab-content" id="codeTab">
                    <div class="code-editor">
                        <div class="editor-tabs">
                            <button class="editor-tab active" data-file="template">模板</button>
                            <button class="editor-tab" data-file="script">脚本</button>
                            <button class="editor-tab" data-file="style">样式</button>
                        </div>
                        <div class="editor-content">
                            <textarea id="codeEditor"></textarea>
                        </div>
                    </div>
                </div>
                <div class="tab-content" id="previewTab">
                    <div class="preview-container" id="previewContainer">
                        <!-- 预览内容将在这里显示 -->
                    </div>
                </div>
            </div>
            <div class="form-actions">
                <button type="button" class="cancel-btn" id="cancelEditBtn">取消</button>
                <button type="button" id="saveEditBtn">保存</button>
            </div>
        </div>
    </div>

    <div id="statusMessage" class="status-message"></div>

    <script src="app.js"></script>
</body>
</html> 